<template>
  <div class="bd1">
    <div class="menu-container">
      <my-menu></my-menu>
    </div>
    <div class="table-container">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="骑手名">
          <el-input
            v-model="searchForm.search"
            placeholder="请输入骑手名"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchDelivery">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="currentData" style="width: 100%">
        <el-table-column
          prop="delivery_id"
          label="配送员ID"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="d_name"
          label="姓名"
          width="130"
        ></el-table-column>
        <el-table-column
          prop="d_phone"
          label="电话"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="order_quantity"
          label="订单数量"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="d_income"
          label="收入"
          width="180"
        ></el-table-column>
        <!-- 由于图片路径是相对路径，这里使用 v-if 来检查图片是否存在 -->
        <!-- <el-table-column label="照片" width="250">
          <template slot-scope="scope">
            <el-image
              v-if="scope.row.d_photo"
              :src="scope.row.d_photo"
              fit="contain"
              style="width: 150px; height: 30px"
            ></el-image>
            <span v-else>无照片</span>
          </template>
        </el-table-column> -->

        <el-table-column align="right">
          <template slot="header"> 操作 </template>
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          :total="totalItems"
          :page-size="pageSize"
          :current-page="currentPage"
          layout="prev, pager, next, jumper"
          @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import menu from "../components/menu.vue";
import { getDelivery, searchDelivery, delDelivery } from "@/utils/api/delivery";
// import { response } from "express";
// import { response } from "express";
export default {
  components: {
    "my-menu": menu,
  },
  data() {
    return {
      deliveryData: [],
      totalItems: 0, // 总条目数
      pageSize: 10, // 每页显示条目个数
      currentPage: 1, // 当前页码
      searchForm: {
        search: "",
      },
    };
  },
  methods: {
    searchDelivery() {
      searchDelivery(this.searchForm.search).then((response) => {
        console.log(response.data.data);
        this.deliveryData = response.data.data;
        this.totalItems = this.deliveryData.length; // 设置总条目数
        this.setCurrentData(); // 设置当前页数据
      });
    },
    setCurrentData() {
      // 计算当前页的数据
      const start = (this.currentPage - 1) * this.pageSize;
      const end = this.currentPage * this.pageSize;
      this.currentData = this.deliveryData.slice(start, end);
    },
    handlePageChange(newPage) {
      this.currentPage = newPage;
      this.setCurrentData(); // 更新当前页数据
    },
    fetchData() {
      getDelivery().then((response) => {
        console.log(response.data.data);
        this.deliveryData = response.data.data;
        this.totalItems = this.deliveryData.length; // 设置总条目数
        this.setCurrentData(); // 设置当前页数据
      });
    },
    handleDelete(index, row) {
      // console.log(row);
      delDelivery(row.delivery_id).then((response) => {
        if (response.data.code == 200) {
          this.fetchData();
        }
      });
    },
  },
  created() {
    this.fetchData();
  },
};
</script>

<style>
.bd1 {
  display: flex; /* 使用Flexbox布局 */
  justify-content: space-between; /* 子元素之间的间距 */
  align-items: flex-start; /* 子元素在交叉轴上的对齐方式 */
  background-color: rgb(245, 252, 241);
  width: 100%;
  height: 781px;
  background-size: 100% 100%;
}

.menu-container {
  width: 200px; /* 根据实际情况调整宽度 */

  /* 如果需要，可以添加padding等样式 */
}

.table-container {
  flex-grow: 1; /* 剩余空间 */
  /* 如果需要，可以添加padding等样式 */
  margin: 0px;
}
/* .demo-form-inline {
  top: -30px;
  margin-left: 0px;
} */
</style>
